<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"
          name="viewport">
	<title>元数据视图配置</title>
	<meta content="ie=edge" http-equiv="X-UA-Compatible">
	<link href="../metronic/assets/global/plugins/jquery.toast.css " rel="stylesheet"/>
	<!-- BEGIN GLOBAL MANDATORY STYLES -->
	<link href="../metronic/assets/global/plugins/font-awesome/css/font-awesome.min.css" rel="stylesheet"
		  type="text/css"/>
	<link href="../metronic/assets/global/plugins/simple-line-icons/simple-line-icons.min.css" rel="stylesheet"
		  type="text/css"/>
	<link href="../metronic/assets/global/plugins/bootstrap/css/bootstrap.min.css" rel="stylesheet" type="text/css"/>
	<link href="../metronic/assets/global/plugins/uniform/css/uniform.default.css" rel="stylesheet" type="text/css"/>
	<link href="../metronic/assets/global/plugins/bootstrap-switch/css/bootstrap-switch.min.css" rel="stylesheet"
		  type="text/css"/>
	<link href="../metronic/assets/global/plugins/bootstrap-touchspin/bootstrap.touchspin.min.css" rel="stylesheet"
		  type="text/css"/>
	<!-- END GLOBAL MANDATORY STYLES -->
	<!-- BEGIN PAGE LEVEL STYLES -->
	<link href="../metronic/assets/global/plugins/select2/select2.css" rel="stylesheet" type="text/css"/>
	<link href="../metronic/assets/global/plugins/datatables/plugins/bootstrap/dataTables.bootstrap.css"
		  rel="stylesheet"
		  type="text/css"/>
	<!-- END PAGE LEVEL STYLES -->
	<!-- BEGIN THEME STYLES -->
	<link href="../metronic/assets/global/css/components.css" id="style_components" rel="stylesheet" type="text/css"/>
	<link href="../metronic/assets/global/plugins/bootstrap/css/bootstrap-table.css" rel="stylesheet" type="text/css"/>
	<link href="../metronic/assets/global/plugins/bootstrap/css/bootstrap-editable.css" rel="stylesheet"
		  type="text/css"/>
	<link href="../metronic/assets/global/plugins/bootstrap/css/bootstrap-table-fixed-columns.css" rel="stylesheet"
		  type="text/css"/>
	<link
			href="../metronic/assets/global/plugins/bootstrap-select/bootstrap-select.css"
			rel="stylesheet"
	/>
	<style type="text/css">
		html,body {
			height: 98%;
		}
		.form-horizontal .form-group{
			margin-right:0px;
			margin-left:0px;
		}
		.table{
			border-top:solid 3px #F3565D;
		}
		#tab_left .active{
			border-left:solid 3px #F3565D;
		}
		.select2-container .select2-choice{
			height:30px !important;
			border-radius:4px !important;
		}
		.ms-container .ms-list{
			height:350px !important;
		}
		.fieldsid .select2-choices{
			height:240px !important;
			float:none !important;
			overflow:auto;
			width:180px;
		}
		.fieldsid .select2-choices li{
			float:none !important;
		}
		#board {
			position: relative;
			top: 0;
			left: 0;
			right: 0;
			bottom: 0;
			height: 95%;
		}
		.panel-heading{
			cursor:move;
		}
	</style>
</head>
<body class="page-header-fixed page-quick-sidebar-over-content " style="width: 98%; background: #0f0; background-color: transparent;">
<div class="row" style="margin-top:16px; height: 100%">
	<!--Begin Right Content-->
	<div class="col-md-12" style="height: 98%">
		<div class="portlet box blue-steel" id="right_cusom" style="background-color:#FFF; height: 100%;">
			<div class=" portlet-title">
				<div class="caption">
					<i class="fa fa-gift"></i>元数据视图配置
				</div>
				<div class="actions">
					<a class="btn btn-default btn-sm" href="javascript:goback();">
						<i class="fa fa-backward"></i> 返回
					</a>
				</div>
			</div>
			<div class="portlet-body" style="height: 95%">
				<div class="tabbable-custom nav-justified" style="height: 100%;border-bottom: 1px solid #ccc;">
					<ul class="nav nav-tabs nav-justified disable" id="myTab">
						<li class="active">
							<a data-toggle="tab" href="#tab_1_1_1" id="a_tab_table">
								视图主表配置
							</a>
						</li>
<!--						<li>-->
<!--							<a data-toggle="tab" href="#tab_1_1_2" id="a_tab_fieldconfig">-->
<!--								关联表配置-->
<!--							</a>-->
<!--						</li>-->
						<li>
							<a data-toggle="tab" href="#tab_1_1_5" id="a_tab_association">
								关联表配置
							</a>
						</li>
						<li>
							<a data-toggle="tab" href="#tab_1_1_3" id="a_tab_fieldaddons">
								显示字段配置
							</a>
						</li>
						<li>
							<a data-toggle="tab" href="#tab_1_1_4" id="a_tab_view">
								数据预览
							</a>
						</li>
					</ul>
					<div class="tab-content" style="height: calc(100% - 20px);">
						<div class="tab-pane active" id="tab_1_1_1">
							<div class="form-horizontal form-body form-inline">
								<div class="form-group" >
									<label class="col-md-4 control-label">&nbsp;&nbsp;数据源视图:</label>
									<div class="col-md-4">
										<select class="js-example-basic-single input-inline input-medium" id="dtName" name="dtName" > </select>
									</div>
								</div>
								<div class="form-group" >
									<label class="col-md-4 control-label">&nbsp;&nbsp;视图标识:</label>
									<div class="col-md-4">
										<input class="form-control input-inline input-medium" id="dtConfigId" name="dtConfigId" placeholder="视图标识唯一,不能重复" type="text" />
									</div>
								</div>
								<hr/>
								<div class="form-group" >
									<label class="col-md-4 control-label">视图中文名称:</label>
									<div class="col-md-4">
										<input class="form-control input-inline input-medium" id="dtNameCn" name="dtNameCn" placeholder="请输入视图中文名称" type="text" />
									</div>
								</div>
								<div class="form-group" >
									<label class="col-md-4 control-label">排序字段:</label>
									<div class="col-md-4">
										<input class="form-control input-inline input-medium" id="dtOrder" name="dtOrder" placeholder="请输入默认排序字段" type="text" />
									</div>
									<span>测试</span>
								</div>
								<div class="form-group" style="display: none">
									<label class="col-md-4 control-label">数据源标识:</label>
									<div class="col-md-4">
										<input class="form-control input-inline input-medium" id="dtConn" name="dtConn" readonly="readonly"  type="text"/>
									</div>
								</div>
								<div class="form-group"  style="margin-left:10px;" >
									<label class="col-md-4 control-label">&nbsp;&nbsp;视图主键:</label>
									<div class="col-md-4">
										<input class="form-control input-inline input-medium" id="dtPrimarykey" name="dtPrimarykey" readonly="readonly"  type="text"/>
									</div>
								</div>
								<hr/>
								<div class="form-group" >
									<label class="col-md-3 control-label" style="margin-left:-12px;">视图说明信息:</label>
									<div class="col-md-7">
										<input class="form-control input-inline input-xlarge" id="dtRemark" name="dtRemark" placeholder="请输入视图说明信息"  style="width:100%;" type="text" />
									</div>
								</div>
								<hr/>
								<div class="form-group">
									<button class="btn blue-steel" id="btn_tableSave" type="button">保&nbsp;&nbsp;存</button>
									<span class="help-inline" id="valide_dtMessage" style="color:red;"></span>
								</div>
							</div>
						</div>
						<div class="tab-pane" id="tab_1_1_2">
							<div class="row" style="margin-left:0;">
								<div class="col-md-1 col-sm-1 col-xs-1" style="padding-left:0px;">
									<ul class="nav nav-tabs tabs-left" id="tab_left">
										<li class="active">
											<a data-toggle="tab" href="#tab_2_1" id="a_fieldconfig_2_1">列表 </a>
										</li>
										<li>
											<a data-toggle="tab" href="#tab_2_2" id="a_fieldconfig_2_2">维护 </a>
										</li>
									</ul>
								</div>
								<div class="col-md-11 col-sm-11 col-xs-11" style="padding-left:0px;">
									<div class="tab-content">
										<div class="tab-pane active" id="tab_2_1">
											<div class="table-toolbar" id="toolbar_fieldconfig"  style="margin-bottom:0px;">
												<div class="btn-group">
													<button class="btn blue-steel" id="btn_fieldconfigEndit"><i class="fa fa-edit"></i>修改</button>
												</div>
												<div class="btn-group">
													<button class="btn blue-steel" id="btn_fieldconfigDel"><i class="fa fa-remove"></i>删除</button>
												</div>
											</div>
											<table id="tb_fieldConfigList"></table>
										</div>
										<div class="tab-pane" id="tab_2_2" style="height:420px; overflow:auto;">
											<div class="form-horizontal form-body form-inline">
												<div class="form-group">
													<label class="col-md-3 control-label">&nbsp;&nbsp;主表</label>
													<div class="col-md-4">
														<input class="form-control input-inline input-medium" id="mastertable" name="mastertable" readonly="readonly"  type="text"/>
													</div>
												</div>
												<div class="form-group" >
													<label class="col-md-3 control-label">&nbsp;&nbsp;关联表</label>
													<div class="col-md-4">
														<select class="js-example-basic-single input-inline input-medium" id="foreignTable" name="foreignTable" placeholder="请选择关联表" >
														</select>
													</div>
												</div>
												<hr style="width:0px;"/>
												<div class="form-group" style="margin-left: 130px;">
													<label class="col-md-3 control-label" style="float:none; width:135px; margin-bottom:5px;">主表字段</label>
													<div class="col-md-4" style="float:none;">
														<select class="js-example-basic-multiple fieldsid" id="fieldid" multiple="multiple" name="fieldid" >
														</select>
													</div>
												</div>
												<div class="form-group" >
													<label class="col-md-3 control-label" style="float:none; width:106px; margin-bottom:5px;">关联关系</label>
													<div class="col-md-3" style="float:none;">
														<select class="form-control input-inline input-xsmall" id="relationType" name="relationType" style="width:100px !important;" >
															<option value="1">内连接</option>
															<option value="2">左连接</option>
															<option value="3">右连接</option>
														</select>
													</div>
												</div>
												<div class="form-group" >
													<label class="col-md-3 control-label" style="float:none; width:135px; margin-bottom:5px;">关联表字段</label>
													<div class="col-md-4" style="float:none;">
														<select class="js-example-basic-multiple fieldsid" id="foreignCode" multiple="multiple" name="foreignCode" >
														</select>
													</div>
												</div>
												<hr/>
												<div class="form-group" >
													<label class="col-md-2 control-label">备注信息</label>
													<div class="col-md-4">
														<input class="form-control input-inline input-xlarge" id="fieldConfigremark" name="fieldConfigremark" placeholder="请输入备注" type="text" />
													</div>
												</div>

												<div class="form-group">
													<button class="btn blue-steel" id="btn_fieldConfigSave" type="button">保&nbsp;&nbsp;存</button>
													<span class="help-inline" id="valide_fieldConfigMessage" style="color:red;"></span>
												</div>
											</div>
										</div>
									</div>
								</div>
							</div>
						</div>
						<div class="tab-pane" id="tab_1_1_3">
							<table id="tb_fieldaddons"></table>
						</div>
						<div class="tab-pane" id="tab_1_1_4">
							<table id="tb_viewList"></table>
						</div>
						<div class="tab-pane" id="tab_1_1_5" style="height: 100%;">
							<div class="row" style="height: 100%;">
								<div class="col-md-12" style="margin-bottom: 10px;">
									<div class="form-horizontal form-body form-inline">
										<div class="form-group" >
											<label class="col-md-3 control-label" style="padding-top: 2px;">关联表</label>
											<div class="col-md-4">
												<select class="js-example-basic-single input-inline input-medium" id="association-table"  placeholder="请选择关联表" >
												</select>
											</div>
										</div>
										<div class="form-group" >
											<div class="col-md-4">
												<button class="btn blue-steel" id="btn-add-association" type="button">添 加</button>
											</div>
										</div>
										<div class="form-group" >
											<div class="col-md-4">
												<button class="btn blue-steel" id="btn-save-association" type="button">保存关联</button>
											</div>
										</div>
									</div>
								</div>
								<div class="col-md-12" id="board">
									<div class="col-md-4 node" id="primary-table" primary-table>
										<div class="panel panel-primary">
											<div class="panel-heading" id="primary-title"></div>
											<div class="panel-body">
												<table class="table">
													<thead>
												<tr>
														<th>
															<input selectedAll type="checkbox">
														</th>
														<th>字段标识</th>
														<th>字段名</th>
														<th>数据类型</th>
														<th>主键</th>
													</tr>
													</thead>
													<tbody id="primary-body" master>
													</tbody>
												</table>
											</div>
										</div>
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
	<!--End Right Content-->
</div>

<!-- Begin隐藏域 -->
<input id="hid_IsMark" name="hid_IsMark" type="hidden"/>
<input id="hid_dtguid" name="hid_dtguid" type="hidden"/>
<input id="hid_dtConfigId" name="hid_dtConfigId" type="hidden"/>
<input id="hid_dbkey" name="hid_dbkey" type="hidden"/>
<input id="hid_fieldconfigid" name="hid_fieldconfigid" type="hidden"/>
<!-- End隐藏域 -->

<script src="../metronic/assets/global/plugins/jquery.min.js" type="text/javascript"></script>
<script src="../metronic/assets/global/plugins/jquery.toast.min.js" type="text/javascript"></script>
<script src="../metronic/assets/global/plugins/jquery-migrate.min.js" type="text/javascript"></script>
<script src="../metronic/assets/global/plugins/jquery-ui/jquery-ui.min.js" type="text/javascript"></script>
<script src="../metronic/assets/global/plugins/bootstrap/js/bootstrap.min.js" type="text/javascript"></script>
<script src="../metronic/assets/global/plugins/bootbox/bootbox.min.js"type="text/javascript"></script>
<script src="../metronic/assets/global/plugins/select2/select2.min.js" type="text/javascript"></script>
<script src="../metronic/assets/global/plugins/select2/select2_locale_zh-CN.js"></script>
<script src="../metronic/assets/global/plugins/bootstrap-touchspin/bootstrap.touchspin.min.js" type="text/javascript"></script>
<script src="../metronic/assets/global/plugins/bootstrap/js/bootstrap-table.js" type="text/javascript"></script>
<script src="../metronic/assets/global/plugins/bootstrap/js/bootstrap-table-zh-CN.js" type="text/javascript"></script>
<script src="../metronic/assets/global/plugins/bootstrap/js/bootstrap-editable.js" type="text/javascript"></script>
<script src="../metronic/assets/global/plugins/bootstrap/js/bootstrap-table-editable.js" type="text/javascript"></script>
<script src="../metronic/assets/global/plugins/bootstrap/js/bootstrap-table-fixed-columns.js" type="text/javascript" ></script>
<script src="../plugins/leader-line.min.js"></script>
<script src="../plugins/draggabilly/draggabilly.min.js" type="text/javascript"></script>
<script src="../plugins/jquery.jsPlumb-1.4.0-all.js"></script>
<script src="../js/systemManager/systemDataView.js" type="text/javascript"></script>
</body>
</html>
